<template>
  <!-- vue3页面 -->

  <div style="width: 100%; height: 100%; padding: 5px">
    <div
      class="main"
      :style="{
        transform: viewId === '' ? 'rotateY(0deg)' : 'rotateY(180deg)',
      }"
    >
      <div class="table">
        <a-card
          style="border-radius: 10px"
          :bodyStyle="{ padding: '20px 20px 0px', height: '100%' }"
          :bordered="false"
        >
          <a-row :gutter="24" style="margin-bottom: 15px">
            <a-col :span="8">
              <a-form-item
                label="经办人/工号"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input-group compact>
                  <a-select v-model:value="memberOrWorkNo" style="width: 28%">
                    <a-select-option value="member">经办人姓名</a-select-option>
                    <a-select-option value="workNo">经办人工号</a-select-option>
                  </a-select>
                  <a-input
                    v-model:value="memberOrWorkNoData"
                    allorClear
                    style="width: 72%"
                  />
                </a-input-group>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                label="报销项目名称"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input
                  v-model:value="filterRule.name"
                  placeholder="报销项目名称"
              /></a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                label="审核状态"
                :label-col="{ style: { width: '100px' } }"
              >
                <MySelect
                  title="请选择审核状态"
                  style="width: 100%"
                  :fieldNames="{ label: 'label', value: 'label' }"
                  :selectData="[]"
                  v-model:value="filterRule.status"
                ></MySelect>
                <!-- <a-radio-group
                  v-model:value="filterRule.status"
                  button-style="solid"
                >
                  <a-radio-button :value="undefined">全部</a-radio-button>
                  <a-radio-button :value="0">待分工会主席审核</a-radio-button>
                  <a-radio-button :value="1">待财务审核</a-radio-button>
                  <a-radio-button :value="2">待工会主席审核</a-radio-button>
                  <a-radio-button :value="3">已审核完毕</a-radio-button>
                </a-radio-group> -->
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24" style="margin-bottom: 15px">
            <a-col :span="8">
              <a-form-item
                label="申请金额大于"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input-number
                  v-model:value="filterRule.higherAmount"
                  :controls="false"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item
                label="申请金额小于"
                :label-col="{ style: { width: '100px' } }"
              >
                <a-input-number
                  v-model:value="filterRule.lowerAmount"
                  :controls="false"
                  style="width: 100%"
                />
              </a-form-item>
            </a-col>
            <a-col :span="5">
              <div style="display: flex; align-items: center">
                <a-button type="primary" style="margin-left: 100px">
                  <template #icon><search-outlined /></template>
                  搜索
                </a-button>
                <!-- <div
                  style="margin-left: 10px; cursor: pointer"
                  @click="more = !more"
                >
                  {{ more ? "隐藏" : "展开" }}更多筛选条件
                  <DownOutlined
                    style="transition: all 0.5s"
                    :style="{ transform: more ? 'rotate(180deg)' : '' }"
                  />
                </div> -->
              </div>
            </a-col>
          </a-row>
          <a-row
            :gutter="24"
            class="more"
            :style="{
              transform: more ? 'scale(1)' : 'scale(0)',
              height: more ? '32px' : '0px',
            }"
          >
            <a-col :span="8"> </a-col>
          </a-row>
        </a-card>
        <MyTable
          :tableData="tableData"
          :loading="loading"
          @reload="getTableData"
          :columns="columns"
          :scroll="{ x: 1500 }"
        >
        </MyTable>
      </div>
      <div class="view" style="height: 100%">
        <MyExpenseView @close="viewId = ''" />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import MySelect from "@/components/CommonDai/SelectSearch.vue";
import MyTable from "@/components/CommonDai/Table.vue";
import { SearchOutlined } from "@ant-design/icons-vue";
import MyExpenseView from "./components/expenseView.vue";
import { ref, reactive, onMounted, h } from "vue";
import { Tag } from "ant-design-vue";

onMounted(() => {
  getTableData();
});
const more = ref(false);
const memberOrWorkNo = ref("member");
const memberOrWorkNoData = ref("");
const filterRule = reactive({
  name: "",
  member: "",
  workNo: "",
  type: undefined,
  higherAmount: undefined,
  lowerAmount: undefined,
  union: undefined,
  association: undefined,
  status: undefined,
});
// const typeSelect = [
//   {
//     value: 0,
//     label: "工会专项经费",
//   },
//   {
//     value: 1,
//     label: "基层工会专项经费",
//   },
//   {
//     value: 2,
//     label: "协会专项经费",
//   },
// ];
/** 表格的渲染功能 */
const tableData = ref<any[]>([]);
/** 表格是否显示加载中 */
const loading = ref<boolean>(false);
/** 获取表格数据的函数 */
const getTableData = (page = 1, size = 10) => {
  console.log(page, size);
  // loading.value = true;
  // getOverture().then((res: any) => {
  //   console.log(res);
  //   tableData.value = res.data.data;
  //   loading.value = false;
  // });
  tableData.value = [
    {
      id: "1",
      item: "扩大科研项目经费",
      workNo: "ThinkSoft",
      subject: "测试科目",
      fundsSource: "测试来源",
      isPersonage: 1,
      balance: 10000000,
      ReimbursementAmount: 888888888,
      union: "经济管理学院工会",
      member: "是呆龙没错了",
      phone: "17859520236",
      time: "2023-11-15",
      invoiceQuantity: 2,
      invoiceNumber: 11451451,
      type: "对个人转账",
      username: "呆龙",
      accountNumber: 625965087177209,
      bankOfDeposit: "测试开户行",
      source: "通用经费",
      commonFunds: "现金",
      specialFund: "测试专项经费",
      status: 2,
    },
  ];
};

const viewId = ref("");
const columns = ref([
  {
    title: "序号",
    dataIndex: "index",
    align: "center",
    isShow: true,
    width: 100,
    customRender: ({ index }: any) => {
      return index + 1;
    },
  },
  {
    title: "报销项目名称",
    dataIndex: "item",
    align: "center",
    isShow: true,
    width: 200,
    copyable: true,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "费用科目",
    dataIndex: "subject",
    isShow: true,
    align: "center",
    width: 100,
  },
  {
    title: "经费来源",
    dataIndex: "fundsSource",
    isShow: true,
    align: "center",
    width: 100,
  },
  {
    title: "报销金额",
    dataIndex: "ReimbursementAmount",
    isShow: true,
    align: "center",
    width: 100,
    customRender: ({ text }: any) => {
      return h(Tag, { color: "orange" }, () => convertLimit(text));
    },
  },
  {
    title: "报销人",
    dataIndex: "member",
    isShow: true,
    align: "center",
    width: 150,
  },
  {
    title: "报销人单位",
    dataIndex: "union",
    isShow: true,
    align: "center",
    width: 200,
  },

  {
    title: "经办人",
    dataIndex: "member",
    isShow: true,
    align: "center",
    width: 150,
    copyable: true,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "经办人工号",
    dataIndex: "workNo",
    isShow: true,
    align: "center",
    width: 150,
    copyable: true,
    ellipsis: true,
    tooltip: true,
  },
  {
    title: "审核状态",
    dataIndex: "status",
    isShow: true,
    align: "center",
    width: 150,
    customRender: ({ record }) => {
      return h(
        "span",
        null,
        [
          {
            name: "待分工会审核",
            color: "cyan",
          },
          {
            name: "待财务审核",
            color: "blue",
          },
          {
            name: "待工会主席审核",
            color: "cyan",
          },
          {
            name: "已审核完毕",
            color: "green",
          },
        ].map((item, index) => {
          if (index !== record.status) {
            return;
          }
          return h(
            Tag,
            {
              color: item.color,
            },
            () => item.name
          );
        })
      );
    },
  },
  {
    title: "操作",
    dataIndex: "proposalNameOrCode",
    isShow: true,
    align: "center",
    width: 150,
    customRender: ({ record }: any) => {
      return h(
        "span",
        null,
        ["查看", "删除"].map((item, index) => {
          return h(
            "a",
            {
              onClick: () => {
                if (index === 0) {
                  // auditId.value = record.id;
                  console.log("查询", record.id);
                  viewId.value = record.id;
                } else {
                  console.log("删除", record.id);
                }
              },
              style: { margin: "0 5px" },
            },
            item
          );
        })
      );
    },
  },
]);

const convertLimit = (arg: number) => {
  if (!arg) {
    return undefined;
  }
  if (arg.toString().length >= 13) {
    // return arg/1000000000000+"万亿"
    const volume = arg / 1000000000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万亿";
  } else if (arg.toString().length >= 9) {
    const volume = arg / 100000000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "亿";
  } else if (arg.toString().length >= 5) {
    const volume = arg / 10000;
    const realVal = parseFloat(volume + "").toFixed(2);
    return realVal + "万";
  } else {
    return arg;
  }
};
</script>

<style scoped lang="less">
:deep(svg) {
  vertical-align: middle;
}
:deep(.ant-col) {
  width: auto;
}
:deep(.ant-form-item) {
  margin-bottom: 0;
}

.main {
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  width: 100%;
  height: 100%;
  transition: all 0.5s;
  transform-style: preserve-3d;
  .table,
  .view {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .view {
    transform: rotateY(180deg);
  }
}
.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.more {
  transform-origin: center top;
  transition: all 0.5s;
}
</style>
